<template>
    <section>
        <table class="custome-table-wrapper">
            <thead class="custome-table-thead">
                <tr class="custome-table-tr">
                    <th class="border-r">合同开始日期</th>
                    <th class="border-r">合同终止日期</th>
                    <th class="border-r">单位名称</th>
                    <th class="border-r">工作地点</th>
                    <th>担任职务</th> 
                </tr>
            </thead>
            <tbody class="custome-table-tbody">
                <tr v-for="t of tableData" :key="t.id">
                    <td>{{ t.startDate }}</td> 
                    <td>{{ t.endDate }}</td> 
                    <td>{{ t.unitName }}</td> 
                    <td>{{ t.workAddress }}</td> 
                    <td>{{ t.position }}</td> 
                    
                </tr>
            </tbody>
        </table>
    </section>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const tableData = ref([
    {
        id: 1,
        startDate: '2023-01-01',
        endDate: '2025-01-01',
        unitName: '大数据公司',
        workAddress: '上海市',
        position: '算法工程师'
    }
])
</script>

<style scoped lang="scss">
.custome-table-wrapper{
    width: 100%;
    font-size: 14px;
    .custome-table-tr{
        display: flex;
        justify-content: space-between;
        background-color: rgb(223, 240, 204);
        padding: 10px 0;
    }
    th{ 
        flex: 1;
        font-weight: 400;
    }
    .custome-table-tbody{
        tr{
            display: flex;
            justify-content: space-between;
            padding: 14px 0;
            border-bottom: #f3f3f3 1px solid;
        }
        td{
            flex: 1;
            text-align: center;
            font-weight: 400;
        }
    }
}
</style>